import React, { Component } from 'react';
import PropTypes from 'prop-types';

import styles from './style.scss';

export default class extends Component {
    constructor(props) {
        super(props);

        this._wrapper = null;
        this._imageWrapper = null;
        this.boxWidth = 0;

        this.state = {
            currentIndex: 0,
            imageLength: props.dataSource.length,
            images: props.dataSource,
        }
    }
    static propTypes = {
        dataSource: PropTypes.array.isRequired,
        fixed: PropTypes.bool,
        onCancel: PropTypes.func,
    };

    static defaultProps = {
        fixed: false,
        onCancel: () => undefined
    };

    componentDidMount() {
        this.boxWidth = this._wrapper.offsetWidth;
        this._imageWrapper.style.width = this.boxWidth * this.props.dataSource.length + 'px';
        [].forEach.call(this._imageWrapper.querySelectorAll('li'), item => item.style.width = this.boxWidth + 'px');
    }

    toPage = (idx) => {
        if (idx === this.state.currentIndex) {
            return;
        }
        this.setState({
            currentIndex: idx,
        });
        this._imageWrapper.style.transform = `translate3D(-${idx * this.boxWidth}px, 0, 0)`;
    };
    toPrevPage = () => {
        this.toPage(this.state.currentIndex - 1);
    };
    toNextPage = () => {
        this.toPage(this.state.currentIndex + 1);
    };
    onCloseBtnClick = evt => {
        const { onCancel } = this.props;
        this.setState({
            images: null
        });
        onCancel();
    }

    // onKeyDown = (event) => {
    //     const LEFT_ARROW = 37;
    //     const RIGHT_ARROW = 39;
    //     const ESC_KEY = 27;
    //     const key = parseInt(event.keyCode || event.which || 0);
    
    //     switch(key) {
    //       case LEFT_ARROW:
    //         if (this._canSlideLeft() && !this._intervalId) {
    //           this._slideLeft();
    //         }
    //         break;
    //       case RIGHT_ARROW:
    //         if (this._canSlideRight() && !this._intervalId) {
    //           this._slideRight();
    //         }
    //         break;
    //       case ESC_KEY:
    //         if (this.state.isFullscreen && !this.props.useBrowserFullscreen) {
    //           this.exitFullScreen();
    //         }
    //     }
    //   };

    render() {
        const { images } = this.state;
        if (!images || images.length < 1) {
            return null;
        }
        const {
            fixed,
            className,
            imageWrapperClass,
            itemClass,
            indicatorWrapperClass,
            indicatorClass,
            dataSource,
            ...props
        } = this.props;
        const { currentIndex } = this.state;
        const len = images.length;
        let cls = styles.imageGallery;
        if (fixed) {
            cls += ' ' + styles.fixed;
        }
        if (className) {
            cls += ' ' + className;
        }
        let clsImageWrapper = styles.imageWrapper;
        if (imageWrapperClass) {
            clsImageWrapper += ' ' + imageWrapperClass;
        }
        let clsItem = styles.item;
        if (itemClass) {
            clsItem += ' ' + itemClass;
        }
        let clsIndicatorWrapper = styles.indicatorWrapper;
        if (indicatorWrapperClass) {
            clsIndicatorWrapper += ' ' + indicatorWrapperClass;
        }
        let clsIndicator = styles.indicator;
        if (indicatorClass) {
            clsIndicator += ' ' + indicatorClass;
        }
        return (
            <div className={cls}
                {...props}
                ref={ref => this._wrapper = ref}
            >
                <ul className={clsImageWrapper} ref={ref => this._imageWrapper = ref}>
                    {
                        images.map((item, idx) => {
                            return (
                                <li key={idx} className={clsItem}>
                                    <img src={item} />
                                </li>
                            );
                        })
                    }
                </ul>
                {
                    len > 1 ?
                        (
                            <ul className={clsIndicatorWrapper}>
                                {
                                    images.map((item, idx) => {
                                        let cls = clsIndicator;
                                        if (idx === currentIndex) {
                                            cls += ' active';
                                        }
                                        return (
                                            <li
                                                key={idx}
                                                className={cls}
                                                onClick={() => this.toPage(idx)}
                                            ></li>
                                        );
                                    })
                                }
                            </ul>
                        ) : null
                }
                {
                    len > 1 && currentIndex !== 0 ?
                        <button
                            className={`${styles.arrow} ${styles.leftArrow}`}
                            onClick={() => this.toPrevPage()}
                            disabled={currentIndex === 0}
                        ></button> : null
                }
                {
                    len > 1 && currentIndex !== len - 1 ?
                        <button
                            className={`${styles.arrow} ${styles.rightArrow}`}
                            onClick={() => this.toNextPage()}
                            disabled={currentIndex === len - 1}
                        ></button> : null
                }
                <button
                    className={styles.btnClose}
                    onClick={this.onCloseBtnClick}
                ></button>

            </div>
        );
    }
}